<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Feature, Map, View} from 'ol';
    import XYZ from 'ol/source/XYZ';
    import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
    import {Vector as VectorSource} from 'ol/source'
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {Polygon} from 'ol/geom'
    import * as turf from '@turf/turf';
    import turfData from '../data/turfDifferenceData';

    export default {
        name: 'ProjectDifferenceAnalysis',
        mounted() {

            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new XYZ({
                            url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
                                'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                        })
                    })
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 26.126468438108688],   //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 5   //缩放到的级别
                })
            });

            const image = new CircleStyle({
                radius: 5,
                fill: null,
                stroke: new Stroke({
                    color: 'red',
                    width: 1
                }),
            });

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };

            //添加兩個多邊形
            this.vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: this.vectorSource,
                style: styleFunction,
            });
            this.map.addLayer(vectorLayer);

            let features = turfData.features;
            let polygons = [];
            let index = 1;
            for (const feature of features) {
                let coordinates = feature.geometry.coordinates;
                console.log(coordinates);
                this.createPolygon(coordinates);
                let polygon = turf.polygon(coordinates, {name: 'poly' + index})
                polygons.push(polygon)
            }
            //利用turf做空间分析
            //获取相交几何坐标
            //差异化分析
            let difference = turf.difference(polygons[0], polygons[1]);

            //差异化分析的坐标
            let coordinates = difference.geometry.coordinates;
            //创建差异化分析的几何图形
            this.createDifference(coordinates);
        },
        methods: {
            createPolygon(coordinates) {
                let feature = new Feature({
                    geometry: new Polygon(coordinates)
                });
                this.vectorSource.addFeature(feature);
            },
            createDifference(coordinates) {
                // 创建差异图层
                let differenceLayer = new VectorLayer({
                    source: new VectorSource({
                        features: [
                            new Feature({
                                geometry: new Polygon(coordinates)
                            })
                        ]
                    })
                });
                // 定义相交样式
                let differenceStyle = new Style({
                    stroke: new Stroke({
                        color: "red",
                        width: 3
                    }),
                    fill: new Fill({
                        color: "rgba(220, 10, 20, 0.3)"
                    })
                });
                differenceLayer.setStyle(differenceStyle);
                // 添加相交图层到地图
                this.map.addLayer(differenceLayer);
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
